<template>
  <div :class="styles['container']" id="printJS-container">
    <table :class="styles['table']">
      <colgroup>
        <col v-for="col in columns" :key="col.prop" :width="col.width">
      </colgroup>
      <thead>
        <tr>
          <th v-for="col in columns" :key="col.prop">{{ col.label }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rows" :key="index">
          <td v-for="col in columns" :key="col.prop + index">{{ row[col.prop] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <el-button @click="print" :class="styles['button']">打印</el-button>
</template>

<script setup name="Print">
import printJS from 'print-js'
const columns = [
  {
    prop: 'cardUID',
    label: '卡牌UID',
    width: 120
  },
  {
    prop: 'cardName',
    label: '卡牌名称',
    width: 120
  },
  {
    prop: 'gradeType',
    label: '评级类型',
    width: 90
  },
  {
    prop: 'score',
    label: '分数',
    width: 90
  },
  {
    prop: 'gradeNo',
    label: '评级号码',
    width: 120
  },
  {
    prop: 'status',
    label: '状态',
    width: 90
  },
  {
    prop: 'result',
    label: '复核结果',
    width: 120
  },
  {
    prop: 'id',
    label: '私人仓货架ID',
    width: 120
  },
  {
    prop: 'enter',
    label: '入库状态',
    width: 90
  }
]
const rows = (() => {
  const list = []
  for (let i = 0; i < 20; i++) {
    list.push({
      cardUID: 'XS23021141a0000b3538',
      cardName: 'PTCG宝可梦 PAS10 喷火龙V2020 309、190 SSR s4a 山色明显V 日版 #POKECOLOR#',
      gradeType: 'PAS',
      score: '9',
      gradeNo: '6B257226',
      status: '未入库',
      result: '复核通过',
      id: 'A区2035-203-01',
      enter: '待入库'
    })
  }
  return list
})()

function print () {
  printJS('printJS-container', 'html')
}
</script>

<style module="styles" lang="less">
.container{
  width: 794px;
  height: 1123px;
}
.table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #333;
  td,th{
    border: 1px solid #333;
    padding: 5px 8px;
  }
}
.button{
  position: absolute;
  right: 0;
  top: 0;
}
</style>
